<template>
<div class="tabe-content">
  <el-table
    :data="props.data"
    style="width: 100%;backgroundColor: transparent;"
    height="300"
    :width="700"
    border
    :row-class-name="tableRowClassName"
  >
    <el-table-column v-if="showIndex" prop="index" label="序号" align="center" width="80" show-overflow-tooltip>
      <template #default="scope">
          {{scope.$index + 1}}
      </template>
    </el-table-column>
    <el-table-column v-for="item in props.columns" :key="item.prop" :prop="item.prop" :label="item.label" align="center" show-overflow-tooltip />
  </el-table>
  <div class="page">
    <!-- jumper -->
    <el-pagination
      :current-page="currentPage4"
      :pager-count="6"
      :page-size="10"
      :page-sizes="[10, 20, 30, 40]"
      :background="background"
      layout="total, prev, pager, next"
      :total="props.data.length"
      size="small"
      @current-change="handleCurrentChange"
      hide-on-single-page
    />
  </div>
</div>
  
  
</template>

<script lang="ts" setup>
import { ref } from 'vue'
interface User {
  id: string
  name: string
  address: string
}

const props = defineProps({
  columns: {
    type: Array,
    default: () => [
  {
    label: '单位属性',
    prop: '单位属性'
  },
  {
    label: '姓名',
    prop: '姓名'
  },
  {
    label: '身份证号',
    prop: '身份证号'
  },
],
  },
  data: {
    type: Array,
    default: () => [],
  },
  showIndex: {
    type: Boolean,
    default: true,
  },
});

const currentPage4 = ref(1)
const background = ref(true)
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage4.value = val
}
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex % 2 === 0) {
    return 'warning-row'
  }
  return 'tableBack'
}

const tableData: any[] = [
  {
    index: '1',
    k1: 'SL060020250701929262',
    k2: '这是工作内容描述这是工作内容描述这是工作内容描述',
    k3: '李四/18888888888',
    k4: '这是存在的问题这是存在的问题这是存在的问题这是',
  },
  {
    index: '2',
    k1: 'SL060020250701929262',
    k2: '这是工作内容描述这是工作内容描述这是工作内容描述',
    k3: '李四/18888888888',
    k4: '这是存在的问题这是存在的问题这是存在的问题这是',
  },
  {
    index: '3',
    k1: 'SL060020250701929262',
    k2: '这是工作内容描述这是工作内容描述这是工作内容描述',
    k3: '李四/18888888888',
    k4: '这是存在的问题这是存在的问题这是存在的问题这是',
  },
  {
    index: '4',
    k1: 'SL060020250701929262',
    k2: '这是工作内容描述这是工作内容描述这是工作内容描述',
    k3: '李四/18888888888',
    k4: '这是存在的问题这是存在的问题这是存在的问题这是',
  },
  {
    index: '5',
    k1: 'SL060020250701929262',
    k2: '这是工作内容描述这是工作内容描述这是工作内容描述',
    k3: '李四/18888888888',
    k4: '这是存在的问题这是存在的问题这是存在的问题这是',
  },
]
</script>

<style scoped lang="scss">
.tabe-content{
  width: 100%;
  // overflow: auto;
  position: relative;
  .clickabe{
    color: #02a7f0;
  }
  .page{
    position: absolute;
    right: 8px;
    margin-top: 8px;
    color: white;
  }
::v-deep() {
  .page .el-pagination__total{
    color: white;
  }
  .page .el-pagination__goto{
    color: white;
  }
  .el-table th.el-table__cell {
    background-color: #083967;
    color: white;
  }
  .el-table .el-table__row {
    background-color: #083967;
    color: white;
  }
  .el-table .warning-row {
    background-color: #2b3b58;
  }
  /* 移除表格行的hover效果 */
        .el-table .el-table__body tr:hover > td {
            background-color: transparent;
        }
        .el-table .el-table__body tr.hover-row > td {
            background-color: transparent;
        }
  // .el-table .success-row {
  //   --el-table-tr-bg-color: var(--el-color-success-light-9);
  // }
}
}


</style>
